﻿@namespace Microsoft.FluentUI.AspNetCore.Components
@using Microsoft.AspNetCore.Components.Forms
@inherits FluentComponentBase

<div class="@ClassValue"
     style="@StyleValue"
     drop-files="@DropOver"
     disabled="@Disabled"
     @ondragenter="@(e => DropOver = true)"
     @ondragenter:stopPropagation
     @ondragover="@(e => DropOver = true)"
     @ondragover:stopPropagation
     @ondragleave="@(e => DropOver = false)"
     @ondragleave:stopPropagation
     @ondragend="@(e => DropOver = false)">

    <div class="inputfile-content" style="z-index: @(DropOver ? null : 999)">

        @ChildContent

        <div class="inputfile-progress" style="@ProgressStyle">
            @if (ProgressTemplate == null)
            {
                <FluentProgress Min="0" Max="100" Value="@ProgressPercent" /><br />
                @ProgressTitle
            }
            else
            {
                @ProgressTemplate(ProgressPercent > 0 ? ProgressFileDetails with { Percentage = ProgressPercent } : new ProgressFileDetails())
            }
        </div>
    </div>

    <div style="grid-column: 1; grid-row: 1; @(DropOver ? $"z-index: {ZIndex.InputFileDropZone}" : null)">
        <InputFile OnChange="OnUploadFilesHandlerAsync"
                   id="@Id"
                   multiple=@Multiple
                   accept="@Accept"
                   disabled="@Disabled"/>
    </div>
</div>
